<template>
	<div class="View">
		<div class="title">
			<i class="iconfont"></i>
			{{ $t("message.environmentSetting.list.title_21") }}
		</div>
		<div class="tab">
			<div class="view_1">
				<el-radio v-model="SetCalcType" :label="1">現在設定されている条件で再計算を実施する。</el-radio>
				<el-radio v-model="SetCalcType" :label="2">以下に設定された条件で再計算を実施する。</el-radio>
			</div>

			<div class="view_2">
				<div class="single">
					<span>長期計算基準</span>
					<div class="radi">
						<el-radio v-model="ThckCalType" :label="0" :disabled="SetCalcType == 1">公称値</el-radio>
						<el-radio v-model="ThckCalType" :label="1" :disabled="SetCalcType == 1">初回実測値</el-radio>
					</div>
				</div>
				<div class="single1">
					<span>最小二乗法計算基準</span>
					<div class="radi">
						<el-radio v-model="Cal" :label="1" :disabled="SetCalcType == 1">全経歴</el-radio>
						<el-radio v-model="Cal" :label="2" :disabled="SetCalcType == 1">
							<el-date-picker type="month" :format="format" v-model="CalDate" :value-format="format"
								placeholder=" " class="ipt picker orange" :disabled="SetCalcType == 1">
							</el-date-picker>
							<span>以降</span>
						</el-radio>
						<el-radio v-model="Cal" :label="3" :disabled="SetCalcType == 1">
							<el-input v-model="SinceCnt" :disabled="SetCalcType == 1"
								@input="SinceCnt = $setMyNum(SinceCnt, '3 - 0')"></el-input>
							<span>回</span>
						</el-radio>
					</div>
				</div>
				<div class="single">
					<span>最小二乗法傾き計算基準</span>
					<div class="radi">
						<el-radio v-model="CalType" :label="1" :disabled="SetCalcType == 1">近似直線</el-radio>
						<el-radio v-model="CalType" :label="0" :disabled="SetCalcType == 1">最終測定値を通る直線</el-radio>
					</div>
				</div>
			</div>

			<div class="view_3">
				<ux-grid :data="tableData" :border="false" :header-cell-style="{
					color: 'rgba(0, 0, 0, 0.85)',
					fontSize: '14px',
					textAlign: 'left',
					fontWeight: 'bold',
					padding: 0,
					height: '32px',
					background: '#F5F5F5',
				}" :cell-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '14px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" :row-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '13px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" max-height="758" ref="uxGrid" :height="tableHeight" v-loading="loading"
					element-loading-spinner="el-icon-loading" :checkbox-config="{
						showHeader: true,
						checkMethod: checkMethod
					}" @cell-click="handClick" @selection-change="handleSelectionChange" element-loading-background="#f8f8f8"
					:element-loading-text="$t('message.bhView.loading')">
					<template slot="empty"> No data </template>
					<ux-table-column type="checkbox" width="50" fixed="left" align="left"> </ux-table-column>
					<ux-table-column property="pltName" title="装置名称" width="180" align="left">
						<template slot-scope="scope">
							<div> {{ scope.row.pltName }} </div>
						</template>
					</ux-table-column>
					<ux-table-column property="thckCalName" title="長期計算基準" width="150" align="left">
						<template slot-scope="scope">
							<div> {{ scope.row.thckCalName }} </div>
						</template>
					</ux-table-column>
					<ux-table-column property="calName" title="最小二乗法計算基準" width="150" align="left">
						<template slot-scope="scope">
							<div> {{ scope.row.calName }} </div>
						</template>
					</ux-table-column>
					<ux-table-column property="calTypeName" title="最小二乗法傾き計算基準" width="200" align="left">
						<template slot-scope="scope">
							<div> {{ scope.row.calTypeName }} </div>
						</template>
					</ux-table-column>
					<ux-table-column property="status" title="Status" width="100" align="center">
						<template slot-scope="scope">
							<div> {{ scope.row.status }} </div>
						</template>
					</ux-table-column>
					<ux-table-column property="status" title="開始" align="center">
						<template slot-scope="scope">
							<div style="text-align: center;"> {{ scope.row.thkCalcSta }}</div>
						</template>
					</ux-table-column>
					<ux-table-column property="status" title="終了" align="center">
						<template slot-scope="scope">
							<div style="text-align: center;"> {{ scope.row.thkCalcEnd }}</div>
						</template>
					</ux-table-column>
				</ux-grid>
			</div>

		</div>

		<div class="footer">
			<el-button @click="initFn">
				{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
			</el-button>
			<el-button type="primary" class="okBTn" @click="okFn">
				OK
			</el-button>
		</div>
	</div>
</template>

<script>
import {
	GetCalcPltList, GetCalcPltTipsMsg, ExecCorrRateCalcPlt
} from "@/api/api";
import $ from "jquery";
import timeFormat from "@/utils/timeFormat";
export default {
	name: "CalcIndex",
	data() {
		return {
			tableHeight: 630,
			radio: 1,
			format: timeFormat(),
			loading: false,
			tableData: [],
			selectRow: {},
			selectList: [],
			SetCalcType: 1,
			ThckCalType: 1,
			Cal: 1,
			CalDate: '2023-10',
			SinceCnt: '',
			CalType: 1,
		};
	},
	components: {},
	watch: {},
	methods: {
		handleSelectionChange(e) {
			console.log(e);
			this.selectList = e;
		},
		//是否可以被选中
		checkMethod({ row }) {
			return !row.status
		},
		handClick(e) {
			console.log(e);
		},
		async ExecCorrRateCalcPltFn() {
			this.$message.success("OK");
			// 使用 map 方法提取id并组成新数组
			let PltCode = this.selectList.map(obj => obj.pltCode);
			let D = {
				PltCode,
				SetCalcType: this.SetCalcType,
				ThckCalType: this.ThckCalType,
				Cal: this.Cal,
				CalDate: this.CalDate,
				SinceCnt: this.SinceCnt,
				CalType: this.CalType,
			};
			console.log(D);
			let R = await ExecCorrRateCalcPlt(D);
			// if (R.data.code != 0) {
			// this.$alert(R.data.msg, '', {
			// 	confirmButtonText: 'OK',
			// 	type: 'warning',
			// });
			// this.initFn();
			// return
			// }
			// this.$message.success("OK");
			// this.initFn();
		},
		async okFn() {
			if (this.selectList.length == 0) {
				return
			}
			let D = {};
			let R = await GetCalcPltTipsMsg(D);
			if (!R) {
				return
			}
			if (R.data.code == 451) {
				this.$confirm(R.data.msg, '', {
					confirmButtonText: 'OK',
					cancelButtonText: 'Cancel',
					type: 'warning'
				}).then(async () => {
					this.ExecCorrRateCalcPltFn();
				}).catch(() => {
				});
			}
		},
		async getDataFn() {
			let D = {};
			let R = await GetCalcPltList(D);
			this.tableData = R.data.data;
		},
		async initFn() {
			await this.getDataFn();
		}
	},
	created() { },
	mounted() {
		this.initFn();

		this.tableHeight = $(".Content").height() - 249;
		this.$nextTick(function () {
			window.addEventListener(
				"resize",
				() => {
					return (() => {
						this.tableHeight = $(".Content").height() - 249;
					})();
				},
				false
			);
		});
	},
	updated() {
		// 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
		var elements = document.querySelectorAll('.elx-cell--checkbox');

		// 遍历这些元素  
		elements.forEach(function (element) {
			// 修改每个元素的title属性  
			element.setAttribute('title', '');
		})
	},
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
	height: 100%;
	padding-left: 32px;
	position: relative;
	// background-color: red;
	width: 1231px;
	max-width: 1231px;

	.title {
		width: 100%;
		height: 32px;
		border-bottom: 1px solid #d8d8d8;
		display: flex;
		align-items: center;

		.iconfont {
			margin-right: 10px;
		}
	}

	.view_1 {
		padding: 10px 0;
		border-bottom: 1px solid #d8d8d8;
	}

	.view_2 {
		padding: 10px 0;
		display: flex;

		span {
			font-weight: 600;
		}

		.single {
			// width: 300px;
			margin-right: 60px;

			.radi {
				padding: 5px 10px;
				border: 1px solid #d8d8d8;
				background-color: #fff;
				margin-top: 8px;

			}
		}

		.single1 {
			// width: 300px;
			margin-right: 60px;

			.radi {
				margin-top: 9px;
			}

			::v-deep .el-input {
				width: 100px;
				height: 32px;
				margin: 0px 10px 0 0;
			}

			::v-deep .el-input__inner {
				width: 100px;
				height: 32px;
			}

			.picker {
				width: 120px;
				margin: 0px 10px 0 0;

				::v-deep .el-input__icon {
					line-height: 32px;
					color: #909399;
				}
			}

			.orange {
				::v-deep .el-input__inner {
					width: 120px;
					background-color: #FFDEACFF;
				}
			}
		}


	}
}

.footer {
	position: absolute;
	left: 32px;
	bottom: 50px;
	height: 32px;
	display: flex;

	button {
		width: 123px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		text-align: center;
		line-height: 32px;
		margin-right: 16px;
	}

	.okBTn {
		width: 86px !important;
		// background: #106ebe;
		// color: #fff;
	}
}
</style>
